<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no,email=no" name=format-detection />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand" />
	<script src="./vue.min.js"></script>
	<script src="./jquery.min.js"></script>
	
	<style>
        /* 去除浏览器默认样式reset */
        html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-weight: normal;
            vertical-align: baseline;
            background: transparent;
            -webkit-tap-highlight-color:rgba(255,255,255,0);
        }
        html, body {
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
        }
        main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
        ul {list-style: none;}
        table {border-collapse: separate; border-spacing: 0;}
        th {font-weight: bold; vertical-align: bottom;}
        td {font-weight: normal; vertical-align: top;}
        input{
            outline: none;
            border: none;
        }
		#message1 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message2 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message3 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message4 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#message5 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 40%);
		  border-radius: 6px;
		  text-align: center;
		  color: #f2f2f2;
		}
		#app{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.logo{
			width: 100px;
			height: 100px;
			margin-bottom: 100px;
			/* border-radius: 50%; */
			background-color: red;
		}
		.input{
			border-bottom: 1px solid #f2f2f2;
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
		input{
			width: 300px;
			height: 30px;
		}
		.loginBtn{
			margin-top: 80px;
			background-color: #2c6cf4;
			color: #f2f2f2;
			width: 300px;
			border-radius: 4px;
			text-align: center;
			padding: 10px;
		}
		.sendCode{
			color: #2c6cf4;
			font-size: 13px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="logo">
			<img style="width: 100%;" src="./logo.png" alt="">
		</div>
		<div class="input">
			<input type="text" v-model="phone" placeholder="请输入手机号">
		</div>
		<div class="input">
			<input style="width: 232px;" type="text" v-model="checkCode" placeholder="请输入验证码">
			<div class="sendCode" @click="getCode">{{remainingTime? remainingTime+'s后获取':'获取验证码'}}</div>
		</div>
		<div class="loginBtn" @click="login">登录</div>
		<div id="message1">发送成功</div>
		<div id="message2">已发送验证码</div>
		<div id="message3">请输入手机号</div>
		<div id="message4">请输入验证码</div>
		<div id="message5"></div>
	</div>
<script>
// 引入rem，使用rem单位，对不同手机屏幕进行适配
(function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px' // 1rem  = 100px
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        }
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

const baseUrl = 'https://xyy.macoolliving.com'
var vapp = new Vue({
	el : '#app',
	data: {
		codeUrl: '/api/crash/auth/sendCheckCode',
		loginUrl:'/api/crash/auth/login',
		checkCode:'',
		phone:'',
		remainingTime:0,
		timer:null,
		isSendPhone: false,
	},
	methods : {
		getCode() {
			let that = this
			if(this.remainingTime === 0){
				if(this.isSendPhone) return $('#message2').fadeIn(100).delay(2000).fadeOut(100);
				if(!this.phone) return $('#message3').fadeIn(100).delay(2000).fadeOut(100);
				$.ajax({
				    url: baseUrl+this.codeUrl+'?phone='+this.phone,
				    type: 'GET',
					contentType: 'application/json', // 发送信息至服务器时内容编码类型
					params:{phone:this.phone},
					dataType: 'json', // 预期服务器返回的数据类型
					headers:{
						token: this.token
					},
				    success: function(res) {
						if(res.code === 200 ){
							that.remainingTime = 60
							that.startCountdown()
							that.isSendPhone = true
							$('#message1').fadeIn(100).delay(2000).fadeOut(100);
						}
				    },
				});
			}
		},
		startCountdown() {
		  this.timer = setInterval(() => {
			if (this.remainingTime > 0) {
			  this.remainingTime--;
			} else {
			  this.clearCountdown();
			}
		  }, 1000);
		},
		clearCountdown() {
		  clearInterval(this.timer);
		  this.timer = null;
		  this.remainingTime = 0; // 重置倒计时时间
		},
		login(){
			if(!this.phone) return $('#message3').fadeIn(100).delay(2000).fadeOut(100);
			if(!this.checkCode) return $('#message4').fadeIn(100).delay(2000).fadeOut(100);
			let params = {
				phone: this.phone,
				checkCode: this.checkCode
			}
			$.ajax({
			    url: baseUrl+this.loginUrl,
			    type: 'POST',
				contentType: 'application/json', // 发送信息至服务器时内容编码类型
				data: JSON.stringify(params), // 将对象转换为JSON字符串作为发送数据
				dataType: 'json', // 预期服务器返回的数据类型
				headers:{
					token: this.token
				},
			    success: function(res) {
					if(res.code === 200 ){
						localStorage.setItem('m-token',res.data.token)
						window.location.href = '/withdrawal.html'
					}else{
						$('#message5').html(res.message).fadeIn(100).delay(2000).fadeOut(100);
					}
			    },
			});
		},
	}
});
</script>
</body>
</html>